<template>
	<view class="rate-page">
		<view class="title">默认主色调（可点击）</view>
		<view><rate v-model="rate1"></rate></view>
		<view class="title">改变颜色（可点击）</view>
		<view class="warning rate2">
			<rate z-class="custom-rate2" v-model="rate2" color="warning"></rate>
			{{rate2}}星
		</view>
		<view class="title">静态（不可点击）</view>
		<view><rate-static v-model="rate3"></rate-static></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rate1: 0,
				rate2: 4,
				rate3: 4.5
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.rate-page{
	border-top: solid 1upx $border-color;
	padding: 30upx;
	.title{
		margin: 30upx 0;
	}
	.custom-rate2{
		margin-right: 10upx;
	}
	.rate2{
		display: flex;
		align-items: center;
	}
}
</style>
